<template>
    <div>
        <div style="display: flex;">
            <div id="container"></div>
            <div style="width: 30%;margin-left: 20px;">
                <div class="companylist">
                    <div v-for="(item, index) in companylist"
                        :class="[index % 2 != 0 ? 'bianse' : '', item.id == active ? 'actives' : '']"
                        @click="activecompany(item.id)">{{
                            item.name }}
                    </div>
                </div>
                <div style="padding: 50px">
                    半径
                    <el-slider v-model="store.$state.companylists.radius" :min="10" :max="1000" @change="change" />
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { getCompanyCoordinateList } from '@/api/attendance'
import { useStore } from '@/stores/counter'
const store = useStore()
let companylist: any = ref([])
let active: any = ref(1)
let map: any = null;
const change = () => {
    let index = companylist.value.findIndex((item: any) => item.id == active.value)
    console.log(index);
    companylist.value[index].radius = store.$state.companylists.radius
    console.log(companylist.value);
    store.$state.companynewlist = companylist.value
    render(companylist.value[index].point)
}
getCompanyCoordinateList().then(res => {
    let obj = res.data.data.find((item: any) => item.id == active.value)
    companylist.value = res.data.data
    store.$state.companylists = {
        ...obj,
    }
    render(obj.point)
})

const render = (point: any) => {
    AMapLoader.load({
        key: "689f3dd4f6425dcd4080dff4b4366be2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            //默认坐标
            map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 15, // 初始化地图级别
                center: point || store.$state.companylists.point, // 初始化地图中心点位置
            });
            //构造点标记
            const marker = new AMap.Marker({
                position: point || store.$state.companylists.point, //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            });
            var circle = new AMap.Circle({
                center: point || store.$state.companylists.point, //圆心位置
                radius: store.$state.companylists.radius, //半径 单位:米
                strokeColor: "#0058f5", //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线粗细度
                fillColor: "#0058f5", //填充颜色
                fillOpacity: 0.35, //填充透明度
            });
            var text = new AMap.Text({
                text: store.$state.companylists.radius + "米内可打卡", //标记显示的文本内容
                anchor: "center", //设置文本标记锚点位置
                draggable: true, //是否可拖拽
                cursor: "pointer", //指定鼠标悬停时的鼠标样式。
                angle: 0, //点标记的旋转角度
                style: {
                    //设置文本样式，Object 同 css 样式表
                    "padding": "10px 15px",
                    "margin-bottom": "1rem",
                    "background-color": "white",
                    "border-width": 0,
                    "text-align": "center",
                    "font-size": "15px",
                    "color": "red",
                },
                position: point || store.$state.companylists.point, //点标记在地图上显示的位置
            });
            text.setMap(map); //将文本标记设置到地图上
            map.add(circle);
            map.add(marker);
        })
        .catch((e) => {
            console.log(e);
        });
    //请求
}
// onMounted(() => {
//     // render()
// });
//坐标列表


//切换高亮切换坐标
const activecompany = (id: any) => {
    active.value = id
    let obj = companylist.value.find((item: any) => item.id == active.value)
    store.$state.companylists = {
        ...obj,
        radius: store.$state.companylists.radius
    }

    render(obj.point)
}
onUnmounted(() => {
    map?.destroy();
});
</script>

<style>
#container {
    width: 70%;
    height: 751px;
}
</style>